<template>
    <div>
        <van-nav-bar left-arrow @click-left="back"/>
        <van-cell title="头像" is-link>
            <van-uploader name="uploader" :after-read="onRead">
                <img :src="$store.state.user.smallImg" class="headPic">
            </van-uploader>
        </van-cell>
        <van-cell title="用户名" is-link :value="$store.state.user.name" to="/user/username"/>
        <van-cell title="手机" icon="graphic" is-link :value="$store.state.user.phone" to="/user/phone"/>
        <van-cell title="登录密码" is-link value="去修改" @click="ispwd=!ispwd" to="/user/password"/>
        <van-button size="large" plain type="danger" class="save" @click="logout">退出登录</van-button>

        <div v-show="ispwd">
            <!-- 密码输入框 -->
            <van-password-input
            :value="value"
            info="密码为 6 位数字"
            @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
            :show="showKeyboard"
            @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
            />
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '123',
            showKeyboard: true,
            ispwd: false,
        }
    },
    methods: {
        onRead(file) {
            // console.log(file.content)
            this.$store.state.user.img = this.$store.state.user.smallImg = file.content
        },
        onInput(key) {
            this.value = (this.value + key).slice(0, 6);
        },
        onDelete() {
            this.value = this.value.slice(0, this.value.length - 1);
        },
        // 退出账号
        logout() {
            this.$store.state.user = {
                id: null,
                img: './static/images/userPhoto.jpg',
                name: '请登录',
                phone: null,
                password: null,
                order: null,
                address: null,
                coupon: null
            }
            this.$store.state.logging = 0
            this.$router.push({path: '/user'})
            // 删除缓存
            localStorage.removeItem('logging')
        },
        back() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less">
    .van-nav-bar {
        &::after {
            border: 0;
        }
    }
    .van-icon-graphic {
        color: #0097FF;
    }
    .headPic {
        width: 40px;
        height: 40px;
    }
</style>
